<template>
  <div class="pageIndexCarouselWrapper">
    <page-index-carousel-dialog v-model="dialogVisible" :data="dialogData" :type="dialogType"
                                @change="freshData"/>
    <xum-title title="轮播图预览" :title-span="24"/>
    <el-row>
      <el-col :span="24">
        <el-card>
          <page-carousel-review :list="list" style="margin-bottom: 40px;"/>
        </el-card>
      </el-col>
    </el-row>
    <xum-title title="操作" :title-span="8" style="margin-top: 28px;">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    </xum-title>
    <el-row :gutter="20">
      <template v-for="(item, index) in list">
        <el-col :span="12" :key="item.id">
          <el-card class="card" :style="index === 0 || index === 1 ? {marginTop: '0'} : {}" shadow="hover">
            <div class="out">
              <div class="inner">
                <index-carousel-item :data="item" :direction="item.direction" :back-image="item.backImage"
                                     :title="item.title" :image="item.image" :link-good-id="item.linkGoodId"
                                     :link-good="item.linkGood" :goods="item.goods" :good-flag="false"
                                     style=""/>
              </div>
              <div class="operation">
                <div class="operation-inner">
                  <el-button type="primary" @click="handleChange(item)">修改</el-button>
                  <el-button type="danger" @click="handleRemove(item)" :loading="removeLoading">删除</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script>
import PageCarouselReview from '@pages/page/part/pageIndexCarousel/PageCarouselReview'
import IndexCarouselItem from '@pages/page/part/pageIndexCarousel/IndexCarouselItem'
import XumTitle from '@/components/XumTitle'
import PageIndexCarouselDialog from '@pages/page/part/pageIndexCarousel/PageIndexCarouselDialog'
import { queryCarouselVO, removeIndexCarouselByIds } from '@/api/ApiPageIndex'
import { ResultCode } from '@/constants/constants'
export default {
  name: 'PageIndexCarousel',
  components: {
    PageIndexCarouselDialog,
    XumTitle,
    IndexCarouselItem,
    PageCarouselReview },
  data () {
    return {
      dialogVisible: false,
      queryLoading: false,
      removeLoading: false,
      list: [],
      dialogType: 'add',
      dialogData: null
    }
  },
  mounted () {
    this.freshData()
  },
  methods: {
    /**
     * 转换数据
     */
    convertData (item) {
      if (item) {
        // linkGood中的price
        const linkGood = item['linkGood']
        if (linkGood) {
          const subGoods = linkGood['subGoodList']
          if (subGoods && typeof subGoods === 'object' && subGoods.length > 0) {
            linkGood.price = -1
            subGoods.forEach(tempItem => {
              if (tempItem && (linkGood.price === -1 || (tempItem['price'] && tempItem['price'] < linkGood.price))) {
                linkGood.price = tempItem.price
              }
            })
          }
        }
        // goods中的price和image
        const goods = item['goods']
        if (goods && typeof goods === 'object' && goods.length > 0) {
          goods.forEach(temp => {
            if (temp) {
              // price
              const subGoods = temp['subGoodList']
              if (subGoods && typeof subGoods === 'object' && subGoods.length > 0) {
                temp.price = -1
                subGoods.forEach(tempItem => {
                  if (tempItem && (temp.price === -1 || (tempItem['price'] && tempItem['price'] < temp.price))) {
                    temp.price = tempItem.price
                  }
                })
              }
              // image
              const images = temp['goodPictureList']
              if (images && typeof images === 'object' && images.length > 0) {
                temp.image = images[0].image
                temp.imageFileId = images[0].imageFileId
              }
            }
          })
        }
      }
      return item
    },
    /**
     * 更新数据
     */
    freshData () {
      this.queryLoading = true
      queryCarouselVO(data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          const tempList = []
          if (data && typeof data === 'object') {
            data.forEach(item => {
              tempList.push(this.convertData(item))
            })
          }
          this.list = tempList
        }
      }, () => {
        this.queryLoading = false
      })
    },
    /**
     * 添加数据，打开添加轮播图数据对话框添加轮播图数据
     */
    handleAdd () {
      this.dialogData = null
      this.dialogType = 'add'
      this.dialogVisible = true
    },
    /**
     * 修改数据
     * @param item 希望修改的数据项
     */
    handleChange (item) {
      this.dialogData = item
      this.dialogType = 'edit'
      this.dialogVisible = true
    },
    /**
     * 移除数据
     * @param item 希望移除的数据项
     */
    handleRemove (item) {
      this.$confirm('你正在执行删除轮播图数据操作，确定继续吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (item && item.id) {
          this.removeLoading = true
          removeIndexCarouselByIds([item.id], data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('移除数据成功')
              this.freshData()
            }
          }, () => {
            this.removeLoading = false
          })
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .pageIndexCarouselWrapper{
    .card{
      margin-top: 20px;
      .out{
        width: 100%;
        height: 400px;
        position: relative;
        cursor: pointer;

        .inner{
          width: 200%;
          height: 200%;
          transform: scale(0.5, 0.5);
          position: absolute;
          left: -50%;
          top: -50%;
        }

        .operation {
          display: none;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: rgba(133,133,133,0.4);
          text-align: center;

          .operation-inner{
            position: absolute;
            width: 100%;
            height: 40px;
            top: 50%;
            left: 0;
          }

        }

      }

      .out:hover{
        .operation {
          display: block;
          transition: 2s;
        }
      }
  }
}
</style>
